<template>
    <view class="container">
        <view class="box" v-for="(item, index) in 2" :key="index">
        	<view class="info">
        		<image src="/static/del/37.png"></image>
        		<view>
        			<view class="name">李先生</view>
        			<!-- <view class="adr">{{item.address}}</view> -->
        		</view>
        	</view>
        	<view class="content">这些足音里,回响着“诚毅勤敏”的湖师校训,这些足音里,传播着坚持“面向基础教育、服务基础教育、研究基础教育”。</view>
        	<view class="imgs">
        		<!-- 一张图片 -->
        		<!-- <image :class="{isPic == 1? 'pic' : 'pics'}" v-if="item.pics_uri.length = 1" :src="item.pics_uri[0]" mode=""></image> -->
        		<!-- 多张图片 -->
        		<image class="pics" v-for="(nitem, nindex) in 4" :key="nindex" src="/static/del/37.png" @click="doPreview(item, nitem)" ></image>
        	</view>
            <!-- 操作点赞、评论 -->
        	<view class="times">
        		<view class="u-flex">
                    <view class="time">18分钟前</view>
                    <image src="../../static/icon/s_icon_07.png" class="s-icon-07"></image>
                </view>
        		<view class="oprate">
                    <view class="oprate-btn" @click="toWrite(item)">
                        <u-icon name="more-dot-fill" color="#54639c" size="34"></u-icon>
                    </view>
        			
        			<view class="oprate-box" v-show="show">
                        <view class="bor-r" @click="changeLike(item)">
                        	<image src="/static/icon/share.png" mode=""></image>
                        	<view>分享</view>
                        </view>
        				<view class="bor-r" @click="changeLike(item)">
        					<image src="/static/icon/heart.png" mode=""></image>
        					<view>{{item.isLike == 0 ? '赞' : '取消'}}</view>
        				</view>
        				<view @click="toComment(item, index)">
        					<image src="/static/icon/write_02.png" mode=""></image>
        					<view>评论</view>
        				</view>
        			</view>
        			<!-- 点赞、评论按钮 透明弹层 不好用 -->
        			<!-- <u-mask :show="show" @click="closeMask(item)" :custom-style="{background: 'rgba(0, 0, 0, 0)'}" z-index="9"></u-mask> -->
        		</view>
        	</view>
            <!-- 点赞、评论 -->
        	<view class="reply-box">
        		<view class="likes">
        			<u-icon name="heart" color="#54639c" size="34" class="u-m-r-10"></u-icon>
        			<view  v-for="(zitem, zindex) in 1" :key="zindex">
                        王女士
                        <text>，</text>
                    </view>
        		</view>
        		<view class="reply" v-for="(citem, cindex) in 1" :key="cindex" 
                    @click.stop="reply(index, cindex)">
        			<view>
        				<text>
                            李先生
                            <text class="u-p-l-5 u-p-r-10">:</text>
                        </text>
                        <template>
                            回复<text class="u-p-l-5 u-p-r-10">王女士:</text>
                        </template>
        				是呀！
        			</view>
        		</view>
        	</view>
        </view>
        
        <view class="comment-input" >
            <input autofocus type="text" v-model="comment" placeholder="评论" :focus="focus" 
                @blur="blur" :auto-blur="true" :cursor-spacing="14" confirm-type="send" @confirm="confirm('', 0)"/>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                focus: false,
            };
        },
        onLoad() {
            
        },
        methods: {
            blur() {
                this.focus = false;
            },
            
            //切换点赞或评价按钮
            toWrite(item) {
                // item.isOpen = !item.isOpen
            	this.show = !this.show;
            },
            
        }
    };
</script>

<style lang="scss">
    .comment-input {
        width: 100vw;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #f5f5f5;
        // border-top: 1px solid #ededed;
        padding: 10upx 20upx;
        box-sizing: border-box;
        z-index: 999;
    }
    
    .comment-input > input {
        width: 100%;
        height: 76upx;
        border-radius: 15rpx;
        background-color: #fff;
        padding: 0 30upx;
        box-sizing: border-box;
    }
    
    
    page{
        background-color: #fff;
        border-top: 2rpx solid #e6e6e6;
    }
    .container{
        padding-bottom: 120rpx;
    }
    
    
    .box{
    	padding:40upx 3vw;
    	box-sizing: border-box;
    	border-bottom: 1px solid #e7e7e7;
    }
    .box:last-child{
        border-bottom: none;
    }
    .info{
    	display: flex;
    	align-items: center;
    }
    .info>image{
    	display: flex;
    	align-items: center;
    	width: 10vw;
    	height: 10vw;
    	margin-right: 2vw;
    	border-radius: 10upx;
    }
    .info>view{
    	width: 82vw;
    }
    .name{
    	width: 100%;
    	font-size:32upx;
    	font-weight: bold;
    	color: #545f7e;
    	margin-bottom: 4upx;
    }
    .adr{
    	font-size:24upx;
    	color: #909090;
    }
    .content{
    	padding-left: 12vw;
    	font-size:30upx;
        // margin-top: 20upx;
    	margin-bottom: 24upx;
    }
    .imgs{
    	padding-left: 12vw;
    	display: flex;
    	align-items: center;
    	flex-wrap: wrap;
    	margin-bottom: 22upx;
    }
    .pics{
        width: 25vw;
        height: 25vw;
        margin-right:1vw;
        margin-bottom: 1vw;
    }
    .pic{
        width: 22.5vw;
        height: 45vw;
        margin-right:1vw;
        margin-bottom: 1vw;
    }
    /* .imgs>image{
    	width:22.5vw;
    	height: 22.5vw;
    	margin-right:1vw;
    	margin-bottom: 1vw;
    } */
    .times{
    	padding-left: 12vw;
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    	
    }
    .times>.time{
    	font-size: 24upx;
    	color:#555558;
    }
    .s-icon-07{
        width: 22rpx;
        height: 24rpx;
        margin-left: 15rpx;
    }
    .times>.oprate{
    	width: 58upx;
    	height: 36upx;
    	position: relative;
    }
    .times>.oprate>image{
    	width: 100%;
    	height: 100%;
    }
    /* 点赞、评论 */
    .reply-box{
    	width: 82vw;
    	margin-left: 12vw;
    	/* background-color: #f7f7f7; */
        /* padding: 5rpx 0 10rpx; */
        background-color: #f8f8f8;
    	border-radius: 5upx;
    	margin-top: 20upx;
    }
    .likes{
    	display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    	padding: 15upx 3vw;
        border-bottom: 1px solid #e6e6e6;
    }
    .likes>image{
    	width: 32upx;
    	height: 32upx;
    	margin-right: 14upx;
    }
    .likes>view{
    	font-size:28upx;
    	color: #54639c;
    	// font-weight: bold;
    	line-height: 1;
    	/* flex:1 */
        margin-right: 5upx;
    }
    
    .reply{
    	/* padding: 26upx 3vw; */
        padding: 10rpx 3vw;
    	/* border-top: 1px solid #e7e7e7; */
    }
    .reply>view{
    	font-size: 28upx;
    	/* margin-bottom: 18upx; */
    }
    .reply>view>text{
    	font-size: 28upx;
    	color: #54639c;
    	// font-weight: bold;
    }
    
    .btn{
        width: 122rpx;
        height: 122rpx;
        background-color: #f29700;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 22rpx;
        color: #fff;
        position: fixed;
        right: 20rpx;
        bottom: 270rpx;
        z-index: 9;
    }
    .write-icon{
        width: 39rpx;
        height: 45rpx;
        margin-bottom: 10rpx;
    }
    
    .oprate-btn{
        width: 60rpx;
        height: 36rpx;
        background-color: #f8f8f8;
        text-align: center;
        line-height: 36rpx;
        border-radius: 6rpx;
    }
    .oprate-box{
    	width: 520upx;
    	height: 78upx;
    	background-color: #4c4c4c;
    	border-radius: 16upx;
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    	position: absolute;
    	top:-22upx;
    	left: -555upx;
        z-index: 99;
    }
    .oprate-box>view{
    	width: 170upx;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }
    .oprate-box>view>image{
    	width: 28upx;
    	height: 28upx;
    	margin-right:10upx;
    }
    .oprate-box>view>view{
    	font-size: 26upx;
    	color:#fff;
    }
    .bor-r{
    	border-right: 1px solid #fff;
    }

</style>
